<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行程</title>
		<!--引入 Vue  和  vant -->
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script src="js/vue.min.js?v=21"></script>
		<script src="js/jquery.min.js?v=21"></script>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- vantUi框架 -->
		<!-- 样式 -->
		<link rel="stylesheet" type="text/css" href="vant-ui@2.11/index.css" />
		<!-- 逻辑方法 -->
		<script src="vant-ui@2.11/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<!-- 样式 -->
	<style>
	
	.title-view{
		background-color: #00BCD4;
		color: #fff;
		text-align: center;
		padding: 10px 0;
	}
	
	.img-add{
		width: 40px;
		height: 40px;
		/* 绝对定位 */
		position: fixed;
		right: 30px;
		bottom: 100px;
		/* 绝对定位 */
	}
	.all{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60px;
		margin-top: 20px;
	}
	.top-line{
		width: 95%;
		display: flex;
		flex-direction: column;
	}
	.inner-view{
		display: flex;
		flex-direction: column;
		width: 20px;
		align-items: center;
	}
	.img-point{
		width: 10px;
		height: 10px;
	}
	
	.line-title{
		width: 1px;
		height: 30px;
		background-color: #eee;
	}
	
	.item-trip{
		width: 95%;
		display: flex;
		flex-direction: column;
	}
	
	.item-top{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.text-time{
		font-size: 12px;
	}
	
	.top-right{
		flex: 1;
		text-align: right;
		font-size: 14px;
	}
	
	.item-bottom{
		display: flex;
		flex-direction: column;
		border-left: #eee solid 1px;
		margin-left: 11px;
		padding: 20px;
	}
	
	.bottom-inner{
		display: flex;
		flex-direction: column;
		border: #eee solid 1px;
		width: 300px;
		border-radius: 5px;
	}
	
	.title-item-view{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 10px
	}
	.img-title{
		width: 25px;
		height: 25px;
	}
	
	.text-title{
		font-size: 14px;
		margin-left: 10px;
	}
	
	.middle-view{
		display: flex;
		flex-direction: row;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.middle-left{
		display: flex;
		flex-direction: column;
	}
	
	.text-name{
		font-size: 18px;
		/* 文字加粗样式 */
		font-weight: bold;
	}
	
	.text-content{
		font-size: 12px;
		flex: 1;
		color: #a8a8a8;
		display: flex;
		flex-direction: column-reverse;
	}
	
	.img-middle-right{
		width: 50%;
		height: 80px;
		border-radius: 5px;
	}
	
	.inner-line{
		width: 100%;
		height: 1px;
		background-color: #eee;
		margin: 10px 0;
	}
	
	.btn-bottom{
		display: flex;
		width: 100%;
		flex-direction: row-reverse;
		margin-bottom: 10px;
	}
	
	.btn{
		border: #A8A8A8 solid 1px;
		border-radius: 2px;
		font-size: 14px;
		padding: 2px 20px;
		margin-right: 20px;
	}
	
	</style>
	<body>
		<div id="root">
			<div class="title-view">行程</div>
			<!-- 列表部分 -->
			<div class="all">
				<div class="top-line">
					<div class="inner-view">
						<img class="img-point" src="img/point.png" >
						<div class="line-title"></div>
					</div>
				</div>
				<!-- 子项 -->
				<div class="item-trip" v-for="item in 5">
					<!-- 顶栏：图片、时间、天气 -->
					<div class="item-top">
						<div><van-icon size="22px" name="clock" /></div>
						<div><span class="text-time">2021-10-20</span></div>
						<div class="top-right">多云转雷阵雨24℃~30℃</div>
					</div>
					<!-- 子项底部：名称、描述、图片、按钮 -->
					<div class="item-bottom">
						<div class="bottom-inner">
							<div class="title-item-view">
								<img class="img-title" src="./img/biyoubangdan.png" >
								<div class="text-title">景点</div>
							</div>
							<div class="middle-view">
								<div class="middle-left">
									<div class="text-name">故宫</div>
									<div class="text-content">东方宫殿建筑代表，世界宫殿建筑典范</div>
								</div>
								<img class="img-middle-right" src="img/gugong.jpg" >
							</div>
							<div class="inner-line"></div>
							<div class="btn-bottom">
								
								<div class="btn">去预定</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<van-tabbar v-model="active" @change="onChange">
				<van-tabbar-item>
					<span>首页</span>
					<template #icon="props">
						<img src="img/home_n.png" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item icon="search">行程</van-tabbar-item>
				<van-tabbar-item icon="setting-o">热点</van-tabbar-item>
				<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
			</van-tabbar>
			
			<!-- 添加行程 -->
			<img class="img-add" src="img/round_add.png">
		</div>
		<script>
			new Vue({
				el: "#root",
				data() {
					return {
						active:1,//底部导航栏下标
					}
				},
				methods: {
					// 底部导航栏切换
					onChange(index) {
						console.log('当前点击了第' + index + '个')
						//跳转要销毁当前页面
						// window.location.replace('tripPage.html')
						if(index == 0){
							// 跳转到首页
							window.location.replace('mainPage.html')
						}else if(index == 1){
							// 跳转到行程页
							window.location.replace('tripPage.html')
						}else if(index == 2){
							// 跳转到热点页
							window.location.replace('hotPage.html')
						}else if(index == 3){
							// 跳转到我的
							window.location.replace('minePage.html')
						}
					},
				},
				mounted() {

				}
			})
		</script>
	</body>
</html>
